<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-11-14 14:16:34
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-14 16:24:44
-->
<template>
  <div class="app-container">
    <!-- 操作条件 -->

    <div class="btnGround">
      <div>
        <el-button icon="el-icon-refresh-right" @click="ResetList">刷新</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="toAddInformation">添加资讯</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        width="50"
        label="序号"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 + pageSize*(currentPage - 1 ) }}
        </template>
      </el-table-column>
      <el-table-column label="标题" header-align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column
        label="发布时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.creat_time*1000 | get_YMDHMS }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.update_time*1000 | get_YMDHMS }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="220"
        align="center"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="toCheckInformation(scope.row.information_id)">查看</el-button>
          <el-button size="mini" type="success" @click="toEditInformation(scope.row.information_id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteInformation(scope.row.information_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- //分页 -->
    <div class="bottomPagination">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10,30,50]"
        :page-size="pageSize"
        layout=" sizes, prev, pager, next,total, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getInformation, deleteInformation } from '@/api/trembleSchool/informationChannel'
import { formatDate } from '@/utils/getTime'
export default {
    filters: {
        get_YMDHMS: function(value) {
            if (!value) return ''
            value = formatDate(value)
            return value
        }
    },
    data() {
        return {
            list: [{
                name: 'name',
                phone: 'phone'
            }], // 表格数据
            currentPage: 1, // 页数
            total: 0, // 总数
            pageSize: 10, // 每页条数
            listLoading: false, // table 加载
            input: ''
        }
    },
    created() {
        // 初始化表格
        this.get_ListData()
    },
    methods: {
        // 获取列表数据
        async get_ListData() {
            this.listLoading = true
            var queryData = {
                pagesize: this.pageSize,
                page: this.currentPage
            }
            var data = await getInformation(queryData)
            console.log('data', data)
            if (data.code === 200) {
                this.list = data.data.data
                this.total = data.data.total
            }
            this.listLoading = false
        },
        // 条件重置
        reset() {
            // 属性命名要与查询属性一致
            this.currentPage = 1
            this.get_ListData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.get_ListData()
        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
            this.get_ListData()
        },
        // 刷新
        ResetList() {
            this.get_ListData()
        },
        // 添加
        toAddInformation() {
            console.log('添加')
            this.$router.push({ path: '/trembleSchool/addInformationChannel' })
        },
        // 查看
        toCheckInformation(information_id) {
            console.log('参数1', information_id)
            this.$router.push({ path: '/trembleSchool/contentManagement/checkInformationChannel', query: { information_id: information_id }})
        },
        // 编辑
        toEditInformation(information_id) {
            console.log('参数2', information_id)
            this.$router.push({ path: '/trembleSchool/editInformationChannel', query: { information_id: information_id }})
        },
        // 删除
        deleteInformation(information_id) {
            this.$confirm('确定要删除该校园资讯', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteInformation({
                    information_id: information_id
                }).then(res => {
                    console.log('解聘员工', res)
                    if (res.code === 200) {
                        this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success'
                        })
                        this.ResetList()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>

<style scoped lang='scss'>
.btnGround {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 20px 0 15px 0;
}

.bottomPagination {
    padding: 15px 0;
}
</style>
